<!-- 家教 -->
<template>
	<view class="big-box">
		<!-- 科目 -->
		<u-popup :show="show" mode="bottom" @open="open" @close="close">
			<view class="jh-h-p-90" style="height: 90vh;">
				<view class="jh-flex jh-justify-between jh-p-lr-40 jh-solid-b jh-l-h-100 jh-h-100">
					<text @click="subjectShow = false">取消</text>
					<text class="jh-text-bold-900">选择科目</text>
					<text class="jh-text-green" @click="subjectYes()">确定</text>
				</view>
				<view class="jh-flex jh-h-p-100">
					<!-- 学历 -->
					<view class="jh-h-p-100 jh-solid-r">
						<view v-for="(item,index) in dataL" :key="index"
							:class="item.type == true ? 'borderHighlight':'' " class=" jh-h-100 jh-w-p-100  jh-p-40 "
							@click="subjectL(item,index)">
							<text :class="item.type ? 'colorHighlight' : ''">{{item.text}}</text>
						</view>
					</view>
					<!-- 右边科目 -->
					<view class="r-subject jh-flex-1 jh-p-10">
						<view class="jh-flex jh-flex-wrap jh-justify-start jh-h-150-min">
							<view v-for="(item,i) in dataR" :key="i"
								class="jh-w-160 jh-h-60 jh-l-h-60 jh-p-lr-20 jh-text-center jh-text-24 jh-b-r-16 jh-solid  jh-m-20"
								:class="item.type  ? 'backgroundHighlight':'backgroundLight' "
								@click="subjectRclick(item,i)">
								<text>{{item.text}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import teacherList from "components/teacherList/index.vue"
	export default {
		components: {
			teacherList
		},
		props: {
			dataL: {
				type: Array,
				default: () => {},

			},
			show: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				dataR: this.dataL[0].subject,
				selected: {}
			}
		},
		onLoad() {
			this.dataL.forEach(el => {
				this.$set(el, 'type', false)
			})
			this.dataR.forEach(el => {
				this.$set(el, 'type', false)
			})
		},
		methods: {
			// 打开时
			open() {
				if (this.dataR) {
					this.dataR.forEach(el => {
						el.type = false
					})
				}
			},
			// 左侧学历选择
			subjectL(item, index) {
				this.dataR = item.subject
				if (this.dataL) {
					this.dataL.forEach(el => {
						el.type = false
					})
				}
				item.type = true
			},
			// 右侧科目选择
			subjectRclick(item, index) {
				if (this.dataR) {
					this.dataR.forEach(el => {
						el.type = false
					})
				}
				item.type = true
			},
			// 科目确定 
			subjectYes() {
				this.dataR.forEach(el => {
					if (el.type) {
						this.selected = el
					}
				})
				// console.log(this.selected, '选中的');
				this.$emit('subjectYes', this.selected)

			},
		}
	}
</script>

<style scoped>
	.backgroundLight {
		/* background-color: white; */
		/* color: black; */
	}

	.backgroundHighlight {
		/* background-color: #04BC16; */
		border-color: #04BC16;
		color: white;
	}

	.borderHighlight {
		border-right: #04BC16 5rpx solid;
	}

	.colorHighlight {
		color: #04BC16;
		font-weight: 600;
	}

	.r-subject {
		background-color: #F5F5F5;
	}

	.daohanglan {
		z-index: 99999;
		position: fixed;
		top: -1rpx;
		width: 100%;
		height: 80rpx;
		margin: 0 0 20rpx 0;
		background-color: white;
		display: flex;
		justify-content: space-around;
	}

	.daohanglan view {
		text-align: center;
		line-height: 80rpx;
	}

	.big-box {
		height: 100vh;
		width: 100%;
		background-color: white;
	}
</style>